```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript BOM与对象详解 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        .card {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background-color: #f8f9fa;
            border-left: 4px solid #6e8efb;
            font-family: 'Courier New', Courier, monospace;
        }
        .method-card {
            background-color: #f0f7ff;
            border-left: 4px solid #4dabf7;
        }
        .important-note {
            background-color: #fff3bf;
            border-left: 4px solid #ffd43b;
        }
        .footer {
            background-color: #212529;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <div class="hero text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">JavaScript BOM 与对象详解</h1>
            <p class="text-xl md:text-2xl mb-8">掌握浏览器对象模型与JavaScript对象核心概念</p>
            <div class="flex flex-wrap justify-center gap-4">
                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full">Window对象</span>
                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full">定时器</span>
                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full">Cookie操作</span>
                <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full">对象创建</span>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-12 max-w-6xl">
        <!-- BOM Overview -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <i class="fas fa-window-maximize text-2xl text-blue-500 mr-3"></i>
                <h2 class="text-3xl font-bold">浏览器对象模型 (BOM)</h2>
            </div>
            <div class="card bg-white p-6 shadow-md mb-8">
                <p class="text-lg mb-4">BOM (Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。</p>
                <p class="text-gray-600">大纲概括：window对象、定时器、cookie、创建对象</p>
            </div>

            <!-- BOM Mind Map -->
            <div class="card bg-white p-6 shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-project-diagram text-blue-500 mr-2"></i>
                    BOM 核心组件关系图
                </h3>
                <div class="mermaid">
                    graph TD
                    A[BOM] --> B[Window对象]
                    A --> C[Location对象]
                    A --> D[History对象]
                    A --> E[Navigator对象]
                    A --> F[Screen对象]
                    B --> G[Document对象]
                    B --> H[定时器]
                    B --> I[弹出框]
                    H --> J[setTimeout]
                    H --> K[setInterval]
                    H --> L[clearTimeout]
                    H --> M[clearInterval]
                </div>
            </div>
        </section>

        <!-- Window Object -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <i class="fas fa-window-restore text-2xl text-blue-500 mr-3"></i>
                <h2 class="text-3xl font-bold">Window 对象</h2>
            </div>
            <div class="card bg-white p-6 shadow-md mb-8">
                <p class="text-lg mb-4">所有浏览器都支持 window 对象。它表示浏览器窗口。</p>
                <ul class="list-disc pl-6 space-y-2 mb-4">
                    <li>所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员</li>
                    <li>全局变量是 window 对象的属性</li>
                    <li>全局函数是 window 对象的方法</li>
                    <li>HTML DOM 的 document 也是 window 对象的属性之一</li>
                </ul>
                <div class="code-block p-4 rounded my-4">
                    <code>// 示例用法<br>alert("警告信息");<br>window.alert("同样效果");<br>window.parseInt("123");<br>document.getElementById("demo"); // document也是window属性</code>
                </div>
            </div>
        </section>

        <!-- Window Location -->
        <section class="mb-16">
            <h3 class="text-2xl font-semibold mb-4 flex items-center">
                <i class="fas fa-location-arrow text-blue-500 mr-2"></i>
                window.location
            </h3>
            <div class="card bg-white p-6 shadow-md mb-8">
                <p class="mb-4">Location属性是一个用于存储当前载入页面URL信息的对象。</p>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="method-card p-4 rounded">
                        <h4 class="font-semibold mb-2">实现页面跳转</h4>
                        <div class="code-block p-3 rounded">
                            <code>window.location.href = "http://www.baidu.com";<br>// 或<br>window.location = "http://www.baidu.com";</code>
                        </div>
                    </div>
                    <div class="method-card p-4 rounded">
                        <h4 class="font-semibold mb-2">重新加载页面</h4>
                        <div class="code-block p-3 rounded">
                            <code>location.reload(); // 重新加载当前页面</code>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Window History -->
        <section class="mb-16">
            <h3 class="text-2xl font-semibold mb-4 flex items-center">
                <i class="fas fa-history text-blue-500 mr-2"></i>
                window.history
            </h3>
            <div class="card bg-white p-6 shadow-md mb-8">
                <p class="mb-4">操作同一个浏览器会话中的已访问页面</p>
                <div class="grid md:grid-cols-3 gap-4">
                    <div class="method-card p-4 rounded text-center">
                        <i class="fas fa-arrow-left text-xl mb-2"></i>
                        <h4 class="font-semibold mb-2">返回上一页</h4>
                        <div class="code-block p-2 rounded">
                            <code>history.back()<br>// 或<br>history.go(-1)</code>
                        </div>
                    </div>
                    <div class="method-card p-4 rounded text-center">
                        <i class="fas fa-arrow-right text-xl mb-2"></i>
                        <h4 class="font-semibold mb-2">前进一页</h4>
                        <div class="code-block p-2 rounded">
                            <code>history.forward()<br>// 或<br>history.go(1)</code>
                        </div>
                    </div>
                    <div class="method-card p-4 rounded text-center">
                        <i class="fas fa-sync-alt text-xl mb-2"></i>
                        <h4 class="font-semibold mb-2">刷新当前页</h4>
                        <div class="code-block p-2 rounded">
                            <code>history.go(0)</code>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Window Open -->
        <section class="mb-16">
            <h3 class="text-2xl font-semibold mb-4 flex items-center">
                <i class="fas fa-external-link-alt text-blue-500 mr-2"></i>
                window.open()
            </h3>
            <div class="card bg-white p-6 shadow-md mb-8">
                <div class="code-block p-4 rounded">
                    <code>// 在新窗口打开百度<br>window.open("http://www.baidu.com", "baidu");</code>
                </div>
            </div>
        </section>

        <!-- Popup Boxes -->
        <section class="mb-16">
            <h3 class="text-2xl font-semibold mb-4 flex items-center">
                <i class="fas fa-comment-dots text-blue-500 mr-2"></i>
                各种弹出框
            </h3>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="card bg-white p-6 shadow-md">
                    <div class="flex items-center mb-3">
                        <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
                        <h4 class="font-semibold">警告框</h4>
                    </div>
                    <p class="mb-3">警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。</p>
                    <div class="code-block p-3 rounded">
                        <code>alert("文本");</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <div class="flex items-center mb-3">
                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
                        <h4 class="font-semibold">确认框</h4>
                    </div>
                    <p class="mb-3">确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。</p>
                    <div class="code-block p-3 rounded">
                        <code>confirm("文本");<br>// 返回 true 或 false</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <div class="flex items-center mb-3">
                        <i class="fas fa-keyboard text-blue-500 mr-2"></i>
                        <h4 class="font-semibold">提示框</h4>
                    </div>
                    <p class="mb-3">提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。</p>
                    <div class="code-block p-3 rounded">
                        <code>prompt("文本", "默认值");<br>// 返回输入值或 null</code>
                    </div>
                </div>
            </div>
        </section>

        <!-- Timers -->
        <section class="mb-16">
            <h3 class="text-2xl font-semibold mb-4 flex items-center">
                <i class="fas fa-clock text-blue-500 mr-2"></i>
                定时器（重要）
            </h3>
            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">setTimeout()</h4>
                    <p class="mb-3">在指定的毫秒数后调用函数或计算表达式</p>
                    <div class="code-block p-3 rounded mb-3">
                        <code>var t = setTimeout("javascript语句", 毫秒);</code>
                    </div>
                    <h4 class="font-semibold mb-3">clearTimeout()</h4>
                    <p class="mb-3">取消由 setTimeout() 方法设置的 timeout</p>
                    <div class="code-block p-3 rounded">
                        <code>clearTimeout(setTimeout_variable);</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3 text-red-500">setInterval()</h4>
                    <p class="mb-3">按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。</p>
                    <div class="code-block p-3 rounded mb-3">
                        <code>setInterval(code, millisec);</code>
                    </div>
                    <h4 class="font-semibold mb-3">clearInterval()</h4>
                    <p class="mb-3">取消由 setInterval() 方法设置的 interval</p>
                    <div class="code-block p-3 rounded">
                        <code>clearInterval(setInterval_variable);</code>
                    </div>
                </div>
            </div>

            <div class="important-note p-6 rounded-lg mb-8">
                <h4 class="font-semibold mb-3">定时器案例：</h4>
                <ul class="list-disc pl-6 space-y-2">
                    <li>做一个定时器的启动和清除控制</li>
                    <li>实现页面的倒数自动跳转</li>
                    <li>做一个时钟的效果 13:22:23</li>
                    <li>实现图片的定时切换</li>
                </ul>
            </div>
        </section>

        <!-- Cookie -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <i class="fas fa-cookie-bite text-2xl text-blue-500 mr-3"></i>
                <h2 class="text-3xl font-bold">Cookie</h2>
            </div>
            <div class="card bg-white p-6 shadow-md mb-8">
                <p class="mb-4">简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以";"分隔。</p>
                <p class="mb-4">cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。</p>
                
                <div class="grid md:grid-cols-2 gap-6 my-6">
                    <div>
                        <h4 class="font-semibold mb-2 text-green-600">Cookie可以做什么？</h4>
                        <ul class="list-disc pl-6 space-y-1">
                            <li>保存用户的登录状态</li>
                            <li>定制页面，如换肤，选择所在地区等</li>
                            <li>购物车的实现</li>
                            <li>记录用户的浏览历史记录</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2 text-red-600">Cookie的缺点：</h4>
                        <ul class="list-disc pl-6 space-y-1">
                            <li>cookie可能被禁用</li>
                            <li>不同的浏览器保存的cookie不能互相访问</li>
                            <li>cookie可能被删除</li>
                            <li>cookie的安全性不够高，以纯文本形式记录</li>
                        </ul>
                    </div>
                </div>
            </div>

            <h3 class="text-2xl font-semibold mb-4">Cookie 操作</h3>
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">设置cookie</h4>
                    <div class="code-block p-3 rounded mb-3">
                        <code>document.cookie = "userId=888";<br>// 多个cookie<br>document.cookie = "userId=888; userName=1601";</code>
                    </div>
                    <p class="text-sm text-gray-600">注意：多次设置是添加而不是覆盖</p>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">获取cookie</h4>
                    <div class="code-block p-3 rounded">
                        <code>var strCookie = document.cookie;<br>// 解析具体值需要自己实现</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">设置过期时间</h4>
                    <div class="code-block p-3 rounded">
                        <code>var date = new Date();<br>date.setTime(date.getTime()+10*24*3600*1000);<br>document.cookie = "userId=888; expires="+date.toGMTString();</code>
                    </div>
                </div>
            </div>

            <h3 class="text-2xl font-semibold mb-4">Cookie 封装方法</h3>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">addCookie(name,value,expiresHours)</h4>
                    <div class="code-block p-3 rounded">
                        <code>function addCookie(name,value,expiresHours){
    var cookieString = name+"="+value;
    if(expiresHours>0){
        var date = new Date();
        date.setTime(date.getTime+expiresHours*60*60*1000);
        cookieString += "; expires="+date.toGMTString();
    }
    document.cookie = cookieString;
}</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">getCookie(name)</h4>
                    <div class="code-block p-3 rounded">
                        <code>function getCookie(name){
    var strCookie = document.cookie;
    var arrCookie = strCookie.split("; ");
    for(var i=0; i&lt;arrCookie.length; i++){
        var arr = arrCookie[i].split("=");
        if(arr[0]==name) return arr[1];
    }
    return "";
}</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">deleteCookie(name)</h4>
                    <div class="code-block p-3 rounded">
                        <code>function deleteCookie(name){
    var date = new Date();
    date.setTime(date.getTime()-10000);
    document.cookie = name+"=v; expires="+date.toGMTString();
}</code>
                    </div>
                </div>
            </div>
        </section>

        <!-- JavaScript Objects -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <i class="fas fa-cube text-2xl text-blue-500 mr-3"></i>
                <h2 class="text-3xl font-bold">JavaScript 对象</h2>
            </div>
            <div class="card bg-white p-6 shadow-md mb-8">
                <p class="text-lg mb-4">JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...</p>
                <p class="text-lg">此外，JavaScript 允许自定义对象。</p>
            </div>

            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-tag text-blue-500 mr-2"></i>
                        访问对象的属性
                    </h3>
                    <p class="mb-3">属性是与对象相关的值。访问对象属性的语法是：</p>
                    <div class="code-block p-3 rounded mb-3">
                        <code>objectName.propertyName</code>
                    </div>
                    <p class="mb-3">示例：</p>
                    <div class="code-block p-3 rounded">
                        <code>var message = "Hello World!";<br>var x = message.length;<br>// x 的值将是 12</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-cogs text-blue-500 mr-2"></i>
                        访问对象的方法
                    </h3>
                    <p class="mb-3">方法是能够在对象上执行的动作。调用方法语法：</p>
                    <div class="code-block p-3 rounded mb-3">
                        <code>objectName.methodName()</code>
                    </div>
                    <p class="mb-3">示例：</p>
                    <div class="code-block p-3 rounded">
                        <code>var message = "Hello world!";<br>var x = message.toUpperCase();<br>// x 的值将是 "HELLO WORLD!"</code>
                    </div>
                </div>
            </div>

            <h3 class="text-2xl font-semibold mb-4">创建 JavaScript 对象</h3>
            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">创建直接的实例</h4>
                    <div class="code-block p-3 rounded mb-3">
                        <code>// 方式一<br>person = new Object();<br>person.firstname = "Bill";<br>person.lastname = "Gates";<br>person.age = 56;<br><br>// 方式二 (对象字面量)<br>person = {<br>  firstname: "John",<br>  lastname: "Doe",<br>  age: 50<br>};</code>
                    </div>
                </div>
                <div class="card bg-white p-6 shadow-md">
                    <h4 class="font-semibold mb-3">采用对象构造器</h4>
                    <div class="code-block p-3 rounded">
                        <code>function Person(firstname, lastname, age) {<br>  this.firstname = firstname;<br>  this.lastname = lastname;<br>  this.age = age;<br>}<br><br>// 创建实例<br>var myFather = new Person("Bill", "Gates", 56);<br>var myMother = new Person("Steve", "Jobs", 48);</code>
                    </div>
                </div>
            </div>

            <div class="card bg-white p-6 shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
                    for...in 遍历对象属性
                </h3>
                <p class="mb-3">JavaScript for...in 语句循环遍历对象的属性。</p>
                <div class="code-block p-3 rounded">
                    <code>var person = {fname: "Bill", lname: "Gates", age: 56};<br><br>for (x in person) {<br>  console.log(x + ": " + person[x]);<br>}<br>// 输出:<br>// fname: Bill<br>// lname: Gates<br>// age: 56</code>
                </div>
            </div>

            <div class="important-note p-6 rounded-lg">
                <h3 class="text-xl font-semibold mb-3 flex items-center">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                    JavaScript 面向对象的特点
                </h3>
                <p>JavaScript 是面向对象的语言，但 JavaScript 不使用类。</p>
                <p>在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。</p>
                <p class="font-semibold mt-2">JavaScript 基于 prototype，而不是基于类的。</p>
            </div>
        </section>

        <!-- Homework -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <i class="fas fa-book text-2xl text-blue-500 mr-3"></i>
                <h2 class="text-3xl font-bold">课后作业</h2>
            </div>
            <div class="card bg-white p-6 shadow-md">
                <div class="mb-6">
                    <h3 class="text-xl font-semibold mb-3">1. 升级换肤功能程序</h3>
                    <p class="mb-3">分析：点击变红或变绿时，存储cookie。下次启动时获取cookie并解析。</p>
                    <p class="mb-3"><strong>要求：</strong>使用封装的cookie方法实现</p>
                </div>
                <div class="mb-6">
                    <h3 class="text-xl font-semibold mb-3">2. 保存账户功能</h3>
                    <p class="mb-3">实现一个可以保存账户信息的界面，使用cookie存储用户输入。</p>
                </div>
                <div class="code-block p-4 rounded">
                    <code>// 封装方法使用示例<br>addCookie("color", "red", 2);  // 设置cookie，2小时后过期<br>getCookie("color");           // 获取cookie值<br>deleteCookie("color");        // 删除cookie</code>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="footer text-white py-8">
        <div class="container mx-auto px-4 max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold">技术小馆</h3>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300">
                        <i class="fas fa-globe mr-2"></i>http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 初始化Mermaid图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // 示例交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 卡片悬停效果
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.15)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
                });
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>
```